import React, { useEffect } from 'react';
import { useHistory, useModel } from 'umi';
import { List } from 'antd-mobile';
import { UnorderedListOutline, PayCircleOutline, SetOutline } from 'antd-mobile-icons';
import styles from './index.less';

const Index = () => {
  const history = useHistory();
  const { initialState } = useModel('@@initialState');
  useEffect(() => {
    console.log('me');
  }, []);
  return (
    <div>
      <div className={styles['person-info']}>
        <img
          loading="lazy"
          className={styles.avatar}
          src={initialState?.currentUser?.avatar}
          alt=""
        />
        <div className={styles.right}>
          <div className={styles.name}>{initialState?.currentUser?.name}</div>
          <div className={styles.company}>
            公司：<span className={styles.value}>水水水水</span>
          </div>
          <div className={styles.dept}>
            部门：<span className={styles.value}>水水水水</span>
          </div>
          <div className={styles.role}>
            角色：<span className={styles.value}>水水水水</span>
          </div>
        </div>
      </div>
      <div className={styles.crminfo}>
        <div className={styles.name}>
          CRM【专业版】<span className={styles.buy}>点击购买</span>
        </div>
        <div>到期时间: 2020-02-12</div>
        <span className={styles.tag}>试用</span>
      </div>
      <List className={styles.menu}>
        <List.Item prefix={<UnorderedListOutline />} onClick={() => {}}>
          账单
        </List.Item>
        <List.Item
          prefix={<PayCircleOutline />}
          onClick={() => {
            window.location.href = 'https://work.weixin.qq.com/kfid/kfce39ca5fe349534c2';
          }}
        >
          联系客服
        </List.Item>
        <List.Item
          prefix={<SetOutline />}
          onClick={() => {
            history.push('/setting');
          }}
        >
          设置
        </List.Item>
      </List>
    </div>
  );
};

export default Index;
